<template>
  <div class="user-info">
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="false"
      :defaultExpandAllRows="true"
    >
      <div slot="expandedRowRender" slot-scope="record" style="margin: 0">
        <div class="expand_content">
          <div class="left">
            <h3>单号</h3>
            <p>业务单号：{{ record.orderNo }}</p>
            <p>支付流水号：{{ record.paymentNo }}</p>
          </div>

          <div class="right">
            <h3>进度</h3>
            <p>下单时间：{{ record.createOrderDate }}</p>
            <p>入账时间：{{ record.orderPayTime }}</p>
          </div>
        </div>
      </div></a-table
    >
  </div>
</template>

<script>
export default {
  computed: {
    id() {
      return this.$route.query.id || "";
    },
  },
  data() {
    return {
      columns: [
        {
          title: "类型",
          dataIndex: "type",
          key: "type",
          customRender: (text, row) => {
            switch (+text) {
              case 1:
                return "订单入账";
              case 2:
                return "提现";
              case 3:
                return "退款";
            }
            // return <table-img src={text} />;
          },
        },
        {
          title: "名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "交易来源地",
          dataIndex: "shopName",
          key: "shopName",
        },
        {
          title: "交易对手",
          dataIndex: "billPeople",
          key: "billPeople",
        },
        {
          title: "支付方式",
          dataIndex: "orderPayType",
          key: "orderPayType",
        },
        {
          title: "金额（元）",
          dataIndex: "shopSum",
          key: "shopSum",
        },
        {
          title: "渠道",
          dataIndex: "channel",
          key: "channel",
        },
      ],
      data: [],
    };
  },
  created() {
    this.getReconciliationDetail();
  },
  mounted() {},
  methods: {
    async getReconciliationDetail() {
      let res = await this.$get(`/shop/bill/query`, {
        id: this.id,
      });
      if (res && res.returnCode == "1000") {
        this.data = [res.dataInfo] || [];
        console.log("this.data1", this.data);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.detail-info {
  .info-body {
    display: flex;
    margin-top: 15px;
  }
}
.ant-table-wrapper {
  margin-top: 20px;
}

.expand_content {
  display: flex;
  justify-content: space-between;
  .left,
  .right {
    flex: 1;
  }
}
</style>